import type { ColTableType } from '#/views/onlineDesign/designPage/template/colTable/type/ColTableType';
import type { Types } from '#/views/onlineDesign/designPage/template/type/types';

import { reactive } from 'vue';

import {
  handlerAdd,
  handlerBatchDel,
  handlerDel,
  handlerEdit,
  loadBtn,
} from '#/views/onlineDesign/designPage/template/methods/defaultBtnMethod';

// ColTable生成配置JSON
export const colTableConfig = reactive({
  // 查询表单配置
  selectForm: {
    // 基础配置
    base: {
      layout: 'horizontal',
      wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4',
      showCollapseButton: true,
      actionButtonsReverse: false,
      showDefaultActions: true,
      submitOnChange: false,
      submitOnEnter: false,
      commonConfig: {
        colon: true,
        labelWidth: 80,
      },
    } as Types.BaseForm,
    // 额外配置
    extra: {
      showSelect: true,
      existDict: false,
      existTable: false,
      existTreeTable: false,
    } as ColTableType.SelectFormExtra,
    // 表单属性
    options: {} as ColTableType.FormComponent,
  },
  // 表格配置
  table: {
    // 基础配置
    base: {},
    // 额外配置
    extra: {
      showSerialNumber: true,
      showChoose: true,
      dict: {
        exist: false,
        dictCodes: [],
      },
    } as ColTableType.Table,
    // 按钮配置
    actionBtn: {
      // 左侧按钮
      buttons: [
        {
          type: 'primary',
          text: '新增',
          class: 'mr-2',
          handlerFun: handlerAdd,
          handlerFunName: 'handlerAdd',
          btnFunctionType: 'add',
          permSuffix: 'add',
        } as Types.BaseButton,
      ],
      // 右侧按钮
      tools: [
        {
          type: 'primary',
          text: '批量删除',
          danger: true,
          class: undefined,
          handlerFun: handlerBatchDel,
          handlerFunName: 'handlerBatchDel',
          btnFunctionType: 'batchDel',
          permSuffix: 'batchDel',
        } as Types.BaseButton,
      ],
      // 操作按钮
      action: [
        {
          type: 'link',
          text: '编辑',
          class: undefined,
          size: 'small',
          handlerFun: handlerEdit,
          handlerFunName: 'handlerEdit',
          btnFunctionType: 'edit',
          permSuffix: 'edit',
        } as Types.BaseButton,
        {
          type: 'link',
          text: '删除',
          class: undefined,
          danger: true,
          size: 'small',
          handlerFun: handlerDel,
          handlerFunName: 'handlerDel',
          handlerWay: 'pop',
          btnFunctionType: 'del',
          permSuffix: 'del',
        } as Types.BaseButton,
      ],
    },
    // 列配置
    columns: {} as ColTableType.TableColumns,
  },
  // 表单配置
  form: {
    // 基础配置
    base: {
      layout: 'horizontal',
      wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-2',
      showDefaultActions: false,
      commonConfig: {
        colon: true,
        labelWidth: 80,
        componentProps: {
          class: 'w-full',
        },
      },
    } as ColTableType.FormBase,
    // 额外配置
    extra: {
      openFormType: 'modal',
      openFormWidth: '50',
      existDict: false,
      existTable: false,
      existTreeTable: false,
    } as ColTableType.FormExtra,
    // 表单属性
    options: {} as ColTableType.FormComponent,
  },
  // 布局配置
  col: {
    resizable: true,
    splitLine: true,
    splitHandle: true,
    leftWidth: 20,
    leftMaxWidth: 20,
    leftMinWidth: 20,
    leftCollapsible: true,
    leftCollapsedWidth: 3,
    rightWidth: 80,
    rightMaxWidth: 80,
    rightMinWidth: 80,
    rightCollapsible: false,
    rightCollapsedWidth: 5,
  } as ColTableType.colLayout,
  // 布局数据
  colModel: {
    type: 'normal',
    mode: 'dict',
    params: {
      dictCode: 'status',
      tableName: '',
      labelField: '',
      valueField: '',
    },
    showSelect: true,
    leftTitle: '分类',
    mainModelField: '',
  } as ColTableType.ColModel,
});

// 更新 colTableConfig 的函数
export async function updateColTableConfig(newData) {
  // 将 newData 转换为响应式对象并替换 tableConfig
  Object.assign(colTableConfig, reactive(newData));
  // 设置按钮
  await loadBtn(newData, colTableConfig);
}
